<template>
	<view class="container">
		<view class="login">
			<view class="uni-h2 text-center title">绑定手机号</view>
			<uni-forms ref="form" :rules="rules" :modelValue="formData" :border="true" label-width="80px">
				<view class="bg-white m-t30 m-b20 round-20">
					<uni-forms-item label="手机号" name="phone">
						<input class="formItem" type="text" v-model="formData.phone" placeholder="请输入手机号" />
					</uni-forms-item>
					<button class="text-blue w-100 text-right usePhone" type="default" open-type="getPhoneNumber" @getphonenumber="getPhone">
						使用本机号码
					</button>
				</view>
				<view class="bg-white round-20">
					<uni-forms-item label="验证码" name="code">
						<view class="uni-flex justify-space-between">
							<input class="formItem w-60" type="number" v-model="formData.code" placeholder="请输入验证码" />
							<view :class="'w-35 m-l20 sendBtn '+(is_send ? 'bg-blue' : 'bg-graydf')" @click="sendCode">{{ is_send ? "发送验证码" : "重发("+downtime+"s)"}}</view>
						</view>
					</uni-forms-item>
				</view>
				<view class="bg-white round-20">
					<uni-forms-item label="密码" name="password">
						<input class="formItem" type="password" v-model="formData.password" placeholder="请输入密码" />
					</uni-forms-item>
				</view>
				<view class="bg-white round-20">
					<uni-forms-item label="确认密码" name="confirm_password">
						<input class="formItem" type="password" v-model="formData.confirm_password" placeholder="请输入确认密码" />
					</uni-forms-item>
				</view>
			</uni-forms>
			<button type="primary" class="formBtn m-auto bg-blue text-white" @click="submitForm">确定</button>
		</view>
	</view>
</template>


<script>
import request from '@/common/request.js';
import md5 from '@/common/md5.js';
import { sendSmsCode } from '@/api/base.js';
let that;
export default {
	data() {
		return {
			wechat_id: 0,		//微信id
			is_send: true,		//是否发送验证码
			downtime: 120,		//验证码重发倒计时
			// 表单数据
			formData: {
				phone: "",
				code: "",
				password: "",
				confirm_password: ""
			},
			rules: {
				username: {
					rules: [
						{ required: true, errorMessage: '请输入手机号' },
						{ minLength: 3, maxLength: 18, errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符' }
					]
				},
				code: {
					rules: [
						{ required: true, errorMessage: '请输入验证码' }
					]
				},
				password: {
					rules: [
						{ required: true, errorMessage: '请输入密码' },
						{ minLength: 6, maxLength: 18, errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符' }
					]
				},
				confirm_password: {
					rules: [
						{ required: true, errorMessage: '请输入密码' },
						{ minLength: 6, maxLength: 18, errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符' }
					]
				}
			}
		}
	},
	onLoad(e) {
		that = this;
		that.wechat_id = e.wechat_id ? e.wechat_id : 0;
	},
	methods: {
		// 发送验证码
		sendCode(){
			if(!this.is_send) return;
			let phone = this.formData.phone;
			if(phone == "") {
				uni.showToast({ title: '请输入手机号', icon: 'none' })
				return;
			}
			console.log("phone", phone)
			let reg = /^1\d{10}$/;
			if(!reg.test(phone)) {
				uni.showToast({ title: '手机号格式不正确', icon: 'none' })
				return;
			}
			request({
				url: "api/smsSend",
				method: "POST",
				data: {
					phone: phone,
					noCheck: "token"
				}
			}).then(res => {
				if(res.code == 0) {
					that.is_send = false;
					let tt = setInterval(function(){
						if(that.downtime == 0){
							clearInterval(tt);
							that.is_send = true;
							return;
						}
						that.downtime--;
					},1000)
				}				
				uni.showToast({ title: res.msg, icon: 'none' })
			})	
		},
		// 触发提交表单
		submitForm() {
			that.$refs.form.validate().then(params =>{
				if(params.password != params.confirm_password) {
					uni.showToast({ title: '两次输入密码不一致', icon: 'none' })
					return;
				}
				request({
					url: "api/regPhone",
					method: "POST",
					data: {
						password: md5.hex_md5(params.password),
						confirm_password: md5.hex_md5(params.confirm_password),
						phone: params.phone,
						code: params.code,
						wechat_id: that.wechat_id,
						noCheck: "token",
						from: "weminicut"
					}
				}).then(res => {
					if(res.code == 0) { //成功
						uni.showToast({ title: '绑定成功', icon: 'none' })
						setTimeout(function(){
							uni.setStorageSync("token",res.data.token);
							that.getUserInfo();
						},1500)
					}
				})
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})	
		},
		// 获取用户信息
		getUserInfo(){
			request({
				url: "api/userinfo"
			}).then(res => {
				if(res.code == 0) {
					uni.setStorageSync("userinfo",res.data);
					uni.switchTab({
						url: "/pages/index/index"
					})
				}
			})
		},
		// 使用本机号码
		getPhone(result) {
			request({
				url: "api/weminiPhone",
				method: "POST",
				data: {
					code: result.detail.code,
					from: "weminicut"
				}
			}).then(res => {
				if(res.code == 0 && res.data && res.data.errcode == 0) {
					that.formData.phone = res.data.phone_info.purePhoneNumber
				}
			})	
		}
	}
}
</script>


<style>
page {
	background-color: #fff;
}
.container {
	padding: 0 10%;
}
.is-required {
	display: none;
}
.title {
	margin-top: 70rpx;
	color: rgba(51, 51, 51, 1);
}
.formBtn {
	margin-top: 100rpx;
	border-radius: 40rpx;
	background-color: #4170F2 !important;
}
.uni-forms-item {
	display: inline !important;
}
.uni-forms-item__label {
	width: 100%;    
	display: initial !!important;
	padding-bottom: 10rpx !important;
}
.uni-forms-item--border {
	border-top: none !important;
}
.formItem {
	min-height: 76rpx;
	line-height: 76rpx;
	padding: 0 20rpx;
}
.formItem {
	background-color: #F0F0F0;
	border-radius: 40rpx;
	line-height: 76rpx;
}
.wechatLogin {
	position: absolute;
	width: 50%;
	bottom: 100rpx;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	left: 25%;
}
.wechatLogin_btn {
	background-color: #fff !important;
	position: relative;
	width: 200rpx;
	height: 82rpx;
	line-height: 82rpx;
	padding: 0;
	margin: -41rpx auto 0;
}
.wechatLogin_btn::after {
	border: none;	
}
.wechatLogin_icon {
	width: 82rpx;
	height: 82rpx;
	border-radius: 50%;
}
.sendBtn {
	height: 76rpx;
	line-height: 76rpx;
	border-radius: 40rpx;
	color: #fff;
	text-align: center;
	font-size: 24rpx;
}
.usePhone , .usePhone::after {
	border: none;
	background: transparent !important;
	font-size: 12px;
	color: #007AFF !important;
}
</style>